// 封装分类数据相关业务代码
import { getCategoryAPI } from '@/apis/category';
import { onBeforeRouteUpdate, useRoute } from 'vue-router';
import { onMounted, ref } from 'vue';

export function useCategory() {
  // 获取路由参数
  const route = useRoute()

  // 获取数据
  const categoryData = ref({})
  const getCategoryData = async (id) => {
    const res = await getCategoryAPI(id)
    categoryData.value = res.result
  }

  onMounted(() => {
    getCategoryData(route.params.id)
  })

  // 目标：路由参数变化的时候，重新请求数据
  // 问题：路由参数变化的时候，组件没有重新渲染
  // 解决：路由参数变化的时候，手动调用获取数据的方法
  onBeforeRouteUpdate((to) => {
    getCategoryData(to.params.id)
  })

  return {
    categoryData
  }
}
